import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Table , Modal, Menu, Icon, Button, message} from 'antd';
import Query from './Query';
import Toggles from '../../components/Toggles';
import styles from './index.less';
import classnames from 'classnames';
import { Link } from 'dva/router';
import DropOption  from '../../components/DropOption/DropOption';
import QueueAnim from 'rc-queue-anim';

const confirm = Modal.confirm

function List ({
  customerInforDetail: {
    list,
    load,
    record,
    index,
    selectedRowKeys,
    selectedRows
  },
    onSearch,
    onDeleteItem,
    onDeleteItem1,
    onEditItem,
    onEditItem1,

    onLock,
    onInsertItem,
    location,
    dispatch,
    onCreate
  }){

  const handleMenuClick = (record, e) => {
    if (e.key === '1') { //修改
          onEditItem(record)
    }else if (e.key === '2') { //删除
      confirm({
        title: '您确定删除吗?',
        onOk () {
          const c = record.id;
          const id = transform({c});
          onDeleteItem(id)
        },
      })
    }else if(e.key === '3'){ //增加
      onCreate(record.id)
    }else if(e.key==='4'){ //查看
      onLock(record.id)
    }else if(e.key === '5'){ //撤户
      const c = record.id;
      const id =  transform({c});
      onInvalid(id);
    }
  }
  //对象转数组
  function transform(obj){
      var arr = [];
      for(var item in obj){
          arr.push(obj[item]);
      }
      return arr;
  }

  //毫秒数日期操作
   function getzf(num){
       if(parseInt(num) < 10){
           num = '0'+num;
       }
       return num;
     }
   function getMyDate(str){
       var oDate = new Date(str),
        oYear = oDate.getFullYear(),
        oMonth = oDate.getMonth()+1,
        oDay = oDate.getDate(),
        oHour = oDate.getHours(),
        oMin = oDate.getMinutes(),
        oSen = oDate.getSeconds(),
        oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
          return oTime;
    };
  function createHandler(values) {
       onCreate(values)
  }
  //复选框
  const rowSelection = {
       onChange: (selectedRowKeys, selectedRows) => {
         dispatch({
           type:'customerInforDetail/save',
           payload:{record:selectedRows,selectedRowKeys}
         })
       },
       type: 'checkbox',
     }

  const columns = [
  {
      title: 'CEO姓名',
      dataIndex:'ceoName',
      key: 'ceoName',
    },{
      title: 'CEO英文名',
      dataIndex:'ceoEname',
      key: 'ceoEname',
    },{
      title: 'CEO性别',
      dataIndex:'ceoSex',
      key: 'ceoSex',
        render: ( text ) => {
          let value;
          if (text === 1) {
            value = '男'
          }
          if (text === 0) {
            value = '女'
          }
          return <span>{value}</span>
        },
     },{
      title: 'CEO民族',
      dataIndex:'ceoNation',
      key: 'ceoNation',
    },{
      title: 'CEO生日',
      dataIndex: 'ceoBirth',
      key: 'ceoBirth',
    },{
      title: '投资方',
      dataIndex: 'investor',
      key: 'investor',
    },{
       title: '投资总额',
       dataIndex: 'investmentTotal',
       key: 'investmentTotal',
     },{
        title: '注册资本',
        dataIndex: 'registCapital',
        key: 'registCapital',
    },{
       title: '注册资金描述',
       dataIndex: 'registCapitalDesc',
       key: 'registCapitalDesc',
   },{
      title: '委托公司',
      dataIndex: 'entrustCompany',
      key: 'entrustCompany',
   },{
     title: '法人代表',
     dataIndex: 'legalRepresentative',
     key: 'legalRepresentative',
   },{
     title: '成立日期',
     dataIndex: 'establishDate',
     key: 'establishDate',
   },{
     title: '经营开始日期',
     dataIndex: 'businessStartDate',
     key: 'businessStartDate',
   },{
      title: '经营结束日期',
      dataIndex: 'businessEndDate',
      key: 'businessEndDate',
    },{
       title: '代表处序号',
       dataIndex: 'representOfficeCode',
       key: 'representOfficeCode',
    },{
      title: '代表处代表人数',
      dataIndex: 'representativeNum',
      key: 'representativeNum',
    },{
      title: '代表处雇员人数',
      dataIndex: 'representEmployeeNum',
      key: 'representEmployeeNum',
    },{
       title: '在华联系单位',
       dataIndex: 'chinaContactUnit',
       key: 'chinaContactUnit',
     },{
       title: '海外机构数',
       dataIndex: 'oversersInstitutionNum',
       key: 'oversersInstitutionNum',
      },{
         title: '实受资本',
         dataIndex: 'realizeCapital',
         key:'realizeCapital',
      },{
        title: '营业范围',
        dataIndex: 'businessScope',
        key:'businessScope',
     },{
        title: '客户情况简介',
        dataIndex: 'customerProfile',
        key:'customerProfile',
     },{
        title: '是否有不良记录',
        dataIndex: 'isBadRecord',
        key:'isBadRecord',
          render: ( text ) => {
            let value;
            if (text === 1) {
              value = '是'
            }
            if (text === 2) {
              value = '否'
            }
            return <span>{value}</span>
          },
      },{
         title: '组织机构代码',
         dataIndex: 'organizationCode',
         key:'organizationCode',
       },{
          title: '开户行（英文）',
          dataIndex: 'depositBank',
          key:'depositBank',
       },{
          title: '申请驻在期限',
          dataIndex: 'applyResidenceDate',
          key:'applyResidenceDate',
        },{
           title: '特别说明',
           dataIndex: 'specialExplanation',
           key:'specialExplanation',
    },{
       title: '创建时间',
       dataIndex: 'createTime',
       key: 'createTime',
       render:(text)=>text?<span>{getMyDate(text)}</span>:''
     },{
        title: '操作人',
        dataIndex: 'operator',
        key: 'operator',
    },{
      title: '修改时间',
      dataIndex: 'modifyTime',
      key: 'modifyTime',
      render:(text)=>text?<span>{getMyDate(text)}</span>:''
    },{
       title: '操作',
       key: 'operation',
       width: 30,
       fixed:'right',
       render: (text, record) => {
         return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '3', name: '增加' },
                                                                                        { key: '2', name: '删除' },
                                                                                        { key: '1', name: '修改' },
                                                                                        { key: '4', name: '查看' },
                                                                                      ]} />
       },
     },
  ]

  return (
    <div className="content-inner">
      <Toggles name='查询条件'>
        <Query onOk={onSearch} />
      </Toggles>



      <div style={{padding: '7px'}}>
          <Button type='primary' style={{ marginRight: 10}} onClick={onCreate} >新增客户</Button>

          <Button   style={{ marginRight: 10}} onClick={()=>onDeleteItem1(selectedRowKeys)} >删除</Button>

          <Button  style={{ marginRight: 10}} onClick={onEditItem1}>修改客户</Button>

          <Button  style={{ marginRight: 10}} onClick={onLock}>查看客户</Button>

      </div>
      <div style={{'background': 'white'}}>
        <QueueAnim//进场动画，每个子标签必须带 key，如果未设置 key 将不执行动画。
          type={'right'}
          delay={30}
          duration={1000}
          ease={'easeInQuart'}
        >
          <Table
            key='1'
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: total => `共 ${total} 条`,
              pageSizeOptions:['5','10','15','20'],
              defaultPageSize:5,
            }}
            rowSelection={rowSelection}
            loading={load}
            dataSource={list}
            className = {styles.table}
            size={'small'}
            style={{width:'100%'}}
            rowKey={record => record.id}
            columns={columns}
            scroll={{ x:'200%'}}
          />
        </QueueAnim>

      </div>
    </div>
  );
}

List.propTypes = {
  customerInforDetail: PropTypes.object.isRequired,
  onDeleteItem: PropTypes.func.isRequired,
  onEditItem: PropTypes.func.isRequired
};

export default List;
